<template>
  <div class="app-container">
    <el-card>
      <main-header @reset="reset" @search="search" />
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="趋势图展示" name="first">
          <div v-if="activeName === 'first' && results.length > 0" class="trend-container">
            <ve-line
              v-if="results.length > 0"
              :data="chartData"
              :height="height"
              :extend="chartExtend"
            />
            <el-empty v-else description="暂无任何记录" />
          </div>
          <div v-else class="trend-container empty-container">
            <el-empty description="暂无任何信息" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="列表信息展示" name="second">
          <list
            :results="results"
            @edit="edit"
          />
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-dialog
      v-el-drag-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="60%"
    >
      <main-form
        :form-data="formData"
        @submit="submit"
      />
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import MainHeader from './component/main-header'
import List from './component/list'
import MainForm from './component/main-form'
import CommonMixin from '@/mixin/CommonMixin'
import { getAll, updateOne } from '@/api/cropDaily'
export default {
  components: {
    MainHeader,
    List,
    MainForm
  },
  directives: { elDragDialog },
  mixins: [CommonMixin],
  data() {
    return {
      activeName: 'first',
      results: [],
      trends: {},
      height: 'calc(100vh - 224px)',
      chartExtend: {
        series: {
          showSymbol: false
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '2%',
          top: '12%',
          containLabel: true
        }
      }
    }
  },
  computed: {
    chartData() {
      const fields = [
        { namekey: 'gdate', name: '日期' },
        { namekey: 'kc', name: 'kc' },
        { namekey: 'wc_min', name: '灌溉下限(%)' },
        { namekey: 'wc_max', name: '灌溉上限(%)' },
        { namekey: 'soil_depth', name: '湿润层深度(cm)' },
        // { namekey: 'height_prog', name: '预测高度(cm)' },
        // { namekey: 'height_real', name: '实际高度(cm)' },
        // { namekey: 'depth_prog', name: '预测根深(cm)' },
        // { namekey: 'depth_real', name: '实际根深(cm)' },
        { namekey: 'water_consum', name: 'ETc(mm)' },
        { namekey: 'water_content', name: '土壤含水率(%)' }
        // { namekey: 'water_useful', name: '可利用含水量(mm)' }
      ]

      return {
        columns: fields.map(val => val.name),
        rows: this.results.map((item) => {
          const temp = {}
          fields.forEach((citem) => {
            temp[citem.name] = item[citem.namekey]
          })
          return temp
        })
      }
    }
  },
  methods: {
    async getList() {
      if (this.listQuery.plant_id) {
        const { data } = await getAll(this.listQuery)
        this.results = data.data
      }
    },
    edit(row) {
      this.formData = row
      this.title = '修改信息'
      this.dialogVisible = true
    },
    async submit(formData) {
      const { msg } = await updateOne(formData.id, formData)
      this.$message.success(msg)
      this.dialogVisible = false
      this.getList()
    },
    getOne(row) {
      this.formData = row
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
